<template>
    <div class="echarts">
        <h3>考试分类统计</h3>
        <div id="main" style="width: 700px;height:600px;"></div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { categoryList } from '@/api/request';
import * as echarts from 'echarts';
import { onMounted } from 'vue';

const list = ref([]);


const getEcharts = () => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
        titlt: {
            text: '考试分类统计',
        },
        legend: {
            top: 'bottom'
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [50, 250],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data:
                    [
                        { value: 40, name: '后端' },
                        { value: 38, name: '网络安全' },
                        { value: 32, name: '前端' },
                        { value: 30, name: '嵌入式' },
                        { value: 28, name: '软件测试' },
                        { value: 26, name: 'AI智能' },
                    ]
                // list.value.map(item => item.text)
            }
        ]


    });
}


// 获取考试分类列表
const getCategoryListFn = async () => {
    await categoryList()
        .then(
            content => {
                // console.log(content);
                let { code, result } = content;
                if (code === 200) {
                    let arr = result.map((item: any) => {
                        return item;
                    });
                    list.value = arr;
                    getEcharts();
                }
            }
        )
}

onMounted(() => {
    getEcharts();
    getCategoryListFn();
})


</script>

<style lang="scss"></style>